<template>
	<view class="app-pages">

		<view class="">
			<view class="" style="margin: 15rpx 0;">
				<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
			</view>
			<view class="swiper">
				<u-swiper :list="banner" indicator="dot" circular></u-swiper>
			</view>
		</view>
		<!--  -->
		<view class="content">
			<view class="tbas">
				<u-tabs :list="list1" @change="handleChange"></u-tabs>
			</view>
			<view class="tabs-content">
				<view class="tabs-content-item" v-for="item in 6" :key="item">
					<u--image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" width="120rpx" height="120rpx" />
					<text>礼服正装</text>
				</view>
				<view class="tabs-content-item" style="height: 0; width: 120rpx;"  v-for="item in 4" :key="item" ></view>
			</view>
		</view>

		<!-- 商品 -->
		<view class="shopping">
			<view class="shopping-item" v-for="item in 7" :key="item">
				<u--image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" width="330rpx" height="240rpx" />
				<view class="shopping-item-text">A类化妆师</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				list1: [{
					name: '服装租赁',
				}, {
					name: '造型设计',
				}],
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				tabsVal: ''
			}
		},
		methods: {
			handleChange(options) {
				this.tabsVal = options
			}
		}
	}
</script>
<style lang="scss" scope>
	.shopping{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.shopping-item{
			margin-top: 15rpx;
			.shopping-item-text{
				text-align: center;
				font-size: 30rpx;
				margin-top: 10rpx;
			}
		}
	}
	.tabs-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.tabs-content-item{
			margin-top: 10rpx;
		}
	}
</style>
